<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-list-1 {
            background-color: #f0f0f0;
        }
        .div-list-2 {
            background-color: #565656;
        }
        .div-list-3 {
            background-color: #54a5f1;
        }
        .div-list-4 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button onclick="getData()">发请求</button>
    <button onclick="clearData()">清空</button>
    <div class="content"></div>
    <script>
        function getData() {
            var o = new XMLHttpRequest();
            o.open('get', 'http://localhost:3000/play/hot');
            o.send();
            o.onreadystatechange = function () {
                if (o.readyState == 4 && o.status == 200) {
                    var res = JSON.parse(o.responseText);
                    renderPage(res)
                }
            }
        }

        function renderPage(res) {
            // res = [
            //     [
            //         {}, {}, {}
            //     ],
            //     [
            //         {}, {}, {}
            //     ]
            // ]
            // c 就是第一个div的内容 这个写好之后 往外面套上一个for循环 就可以得到全部的8个div
            var content = document.querySelector('.content')
            for (var j = 0; j < res.length; j++) {
                var div = document.createElement('div');
                div.className = 'div-list-'+(j+1);
                for (var i = 0; i < res[j].length; i++) {
                    // 向div中添加内容
                    var innerP = document.createElement('p');
                    innerP.innerHTML = '当前是第' + (i + 1) + '块'
                    var innerDiv1 = document.createElement('div'); // text
                    innerDiv1.innerHTML = res[j][i].text
                    var innerDiv2 = document.createElement('div'); // description
                    innerDiv2.innerHTML = res[j][i].description
                    var innerImg = document.createElement('img');
                    innerImg.src = res[j][i].img;
                    // 添加到外层div中
                    div.appendChild(innerP)
                    div.appendChild(innerDiv1)
                    div.appendChild(innerDiv2)
                    div.appendChild(innerImg)
                }
                content.appendChild(div)
            }
        }

        // 清空数据
        function clearData() {
            var content = document.querySelector('.content');
            content.innerHTML = '';
        }
    </script>
</body>

</html>